<template>
    <div class='my-center-container'>
        <div class='banner'>
            <div class='data-total'>
                <el-space :size='20' spacer='|'>
                    <div class='num-box'>
                        <span class='text'>获赞</span>
                        <span class='num'>{{ handleCount(user?.countInfo?.collect || 0) }}</span>
                    </div>
                    <div class='num-box'>
                        <span class='text'>评论</span>
                        <span class='num'>{{ handleCount(user?.countInfo?.comment || 0) }}</span>
                    </div>
                    <div class='num-box'>
                        <span class='text'>粉丝</span>
                        <span class='num'>{{ handleCount(user?.countInfo?.fans || 0) }}</span>
                    </div>
                    <div class='num-box'>
                        <span class='text'>作品</span>
                        <span class='num'>{{ handleCount(user?.countInfo?.works || 0) }}</span>
                    </div>
                </el-space>
            </div>
        </div>
        <div class='my-center-box'>
            <!--            导航栏区域-->
            <div class='my-center-nav'>
                <div class='nav-header'>
                    <img :src='user.avatar' alt='avatar'>
                    <div class='nickname'>{{ user.userInfo?.nickName || '昵称' }}</div>
                    <div class='auth' @click='$router.push("/myAuth")'>认证：
                        <el-badge is-dot>
                            <span v-if='!user?.posts?.[0]'>未认证</span>
                            <el-tag v-else-if='user?.posts?.[0] === "管理员"' type='warning' effect='light'>
                                {{ user.posts[0] }}
                            </el-tag>
                            <el-tag v-else-if='user?.posts?.[0] === "老师"' effect='light'>
                                {{ user.posts[0] }}
                            </el-tag>
                            <el-tag v-else-if='user?.posts?.[0] === "观众"' type='success' effect='light'>
                                {{ user.posts[0] }}
                            </el-tag>
                            <span v-else>未认证</span>
                        </el-badge>
                    </div>
                </div>
                <ul class='nav-container'>
                    <router-link v-for='item in menu' :key='item.path' class='nav-item' :to='item.path'>
                        <img class='nav-icon' :src='item.icon' alt='basic'>
                        <span class='nav-text'>{{ item.text }}</span>
                    </router-link>
                </ul>
            </div>
            <!--            内容展示区域-->
            <div class='content-show-container'>
                <div class='card-title'>
                    <div class='text'>{{ $route.meta?.title || '个人中心' }}</div>
                </div>
                <!--                核心-->
                <div class='card-content'>
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { reactive } from 'vue';
import basicInfoIcon from '@/assets/my/basic_info.png';
import safetySettingIcon from '@/assets/my/safety_setting.png';
import myMessageIcon from '@/assets/my/my_msg.png';
import myJoinIcon from '@/assets/my/my_join.png';
import myWorksIcon from '@/assets/my/my_works.png';
import myFocusIcon from '@/assets/my/my_focus.png';
import myCollectIcon from '@/assets/my/my_collect.png';
import myViewIcon from '@/assets/my/my_view.png';
import myJudgementWorksIcon from '@/assets/my/myJudgementWorksIcon.png';
import useUserStore from '@/store/modules/user';
import { handleCount } from '@/utils/sk';

const menu = reactive([
    {
        path: '/basicInfo',
        icon: basicInfoIcon,
        text: '基本资料'
    },
    {
        path: '/safetySetting',
        icon: safetySettingIcon,
        text: '安全设置'
    },
    {
        path: '/myMessage',
        icon: myMessageIcon,
        text: '我的消息'
    },
    {
        path: '/myJoin',
        icon: myJoinIcon,
        text: '我参加的'
    },
    {
        path: '/myWorks',
        icon: myWorksIcon,
        text: '我的作品'
    },
    {
        path: '/myFocus',
        icon: myFocusIcon,
        text: '我关注的'
    }
    ,
    {
        path: '/myCollect',
        icon: myCollectIcon,
        text: '我收藏的'
    },
    {
        path: '/myView',
        icon: myViewIcon,
        text: '最近浏览'
    },
    {
        path: '/myJudgementWorks',
        icon: myJudgementWorksIcon,
        text: '我需点评的作品'
    }
]);
const user = useUserStore();
</script>
<style scoped lang='scss'>
.banner {
    background: -webkit-linear-gradient(to right, #64aaff55, #3ed5ee55);
    background: linear-gradient(to right, #64aaff55, #3ed5ee55);
    height: 200px;
    position: relative;

    .data-total {
        padding: 0 250px;
        font-size: 20px;
        font-weight: 500;
        color: #fff;
        position: absolute;
        bottom: 50px;
        left: 375px;

        .text {
            font-weight: 500;
            font-size: 22px;
        }

        .num-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
}

.my-center-box {
    padding: 0 250px;
    display: flex;
    align-items: flex-start;

    .my-center-nav {
        min-height: 666px;
        width: 350px;
        background: #FFFFFF;
        border-radius: 12px;
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
        transform: translateY(-150px);
        padding: 30px;
        position: sticky;
        top: 160px;
    }

    .nav-header {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
        }

        .nickname {
            font-size: 24px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.8);
            padding: 10px 0 4px 0;
        }

        .auth {
            font-size: 18px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            cursor: pointer;
        }
    }

    .nav-container {
        width: 290px;
        margin-top: 20px;

        :deep(.router-link-active) {
            background: rgba(64, 158, 255, 0.1);
        }

        .nav-item {
            width: 100%;
            height: 60px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border: 1px solid rgba(64, 158, 255, 0.1);
            margin-bottom: 6px;
            cursor: pointer;

            &:hover {
                background: rgba(64, 158, 255, 0.1);
            }

            .nav-text {
                font-size: 18px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.7);
            }
        }
    }

    .content-show-container {
        flex: 1;
        background: #fff;
        margin-top: 25px;
        margin-left: 25px;
        border-radius: 6px;
        padding: 20px;
        min-height: 590px;
        display: flex;
        flex-direction: column;

        .card-title {
            font-size: 20px;
            font-weight: 700;
            color: rgba(64, 158, 255, 0.8);
            padding-left: 16px;
            position: relative;
            height: fit-content;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                height: 100%;
                width: 6px;
                background: rgba(64, 158, 255, 0.8);
                top: 0;
                border-radius: 10px;
            }
        }

        .card-content {
            margin-top: 16px;
            flex: 1;
            position: relative;
            //background: #F2F6FC;
        }
    }

}
</style>
